<template>
  <div class="order-detail-container">
    <div class="order-detail-card">
      <div class="card-header">
        <h2 class="header-title">订单详情</h2>
        <el-button type="default" class="close-button" @click="handleCancel">
          <el-icon class="close-icon"><Close /></el-icon>
        </el-button>
      </div>

      <div class="card-content">
        <!-- 捐赠者额外信息 -->
        <div class="section donor-info">
          <div class="section-header">
            <h3 class="section-title">捐赠者额外信息</h3>
            <span class="badge">4 项可用</span>
          </div>

          <div class="info-grid">
            <div
              v-for="(item, index) in donorInfos"
              :key="index"
              class="info-item"
            >
              <div class="item-content">
                <div class="icon-wrapper" :class="item.bgColor">
                  <el-icon :class="item.iconColor">
                    <User v-if="item.icon === 'User'" />
                    <Picture v-if="item.icon === 'Picture'" />
                    <Avatar v-if="item.icon === 'Avatar'" />
                    <Microphone v-if="item.icon === 'Microphone'" />
                  </el-icon>
                </div>
                <span class="item-title">{{ item.title }}</span>
              </div>

              <div class="item-actions">
                <span class="price-tag">免费</span>
                <el-button
                  type="primary"
                  link
                  class="view-button"
                  @click="handleView(item)"
                >
                  <el-icon class="view-icon"><View /></el-icon>查看
                </el-button>
              </div>
            </div>
          </div>
        </div>

        <!-- 订购精子 -->
        <div class="section product-section">
          <div class="section-header">
            <h3 class="section-title">订购精子</h3>
            <span class="badge">2 种可选</span>
          </div>

          <div class="product-container">
            <div class="product-grid">
              <div
                v-for="(product, index) in products"
                :key="index"
                class="product-item"
              >
                <div class="product-content">
                  <div class="product-icon-wrapper">
                    <el-icon class="product-icon">
                      <Collection v-if="product.icon === 'Collection'" />
                      <Cpu v-if="product.icon === 'Cpu'" />
                    </el-icon>
                  </div>
                  <div class="product-details">
                    <h4 class="product-name">{{ product.name }}</h4>
                    <p class="product-description">{{ product.description }}</p>
                  </div>
                </div>

                <div class="product-controls">
                  <span class="product-price"
                    >¥{{ product.price.toLocaleString() }}</span
                  >
                  <el-input-number
                    v-model="product.quantity"
                    :min="1"
                    :max="99"
                    @change="calculateTotal"
                    size="small"
                    class="quantity-input"
                  />
                </div>
              </div>
            </div>

            <div class="help-tip">
              <el-icon class="tip-icon"><InfoFilled /></el-icon>
              <span>不确定捐精的制备类型？</span>
              <el-link type="primary" class="help-link"
                >点击此处寻找帮助</el-link
              >
            </div>
          </div>
        </div>

        <!-- 底部总计和操作 -->
        <div class="order-footer">
          <div class="total-section">
            <p class="total-label">总计金额</p>
            <p class="total-amount">¥{{ totalAmount.toLocaleString() }}</p>
          </div>

          <div class="action-buttons">
            <el-button class="cancel-button" @click="handleCancel"
              >取消</el-button
            >
            <el-button
              type="primary"
              class="add-to-cart-button"
              @click="handleAddToCart"
            >
              <el-icon class="cart-icon"><ShoppingCart /></el-icon>添加到购物车
            </el-button>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ref, onMounted, watch } from "vue";
import {
  View,
  InfoFilled,
  ShoppingCart,
  User,
  Picture,
  Avatar,
  Microphone,
  Collection,
  Cpu,
  Close,
} from "@element-plus/icons-vue";
const emits = defineEmits(["addOrder", "applySubmit", "closeOrder"]);
const props = defineProps({
  orderInfoData: {
    type: Object,
    required: true,
  },
});
const donorInfos = ref([
  {
    title: "个人简介",
    icon: "User",
    bgColor: "icon-bg-primary",
    iconColor: "icon-primary",
  },
  {
    title: "童年照片",
    icon: "Picture",
    bgColor: "icon-bg-amber",
    iconColor: "icon-amber",
  },
  {
    title: "轮廓",
    icon: "Avatar",
    bgColor: "icon-bg-blue",
    iconColor: "icon-blue",
  },
  {
    title: "完整的音频采访",
    icon: "Microphone",
    bgColor: "icon-bg-rose",
    iconColor: "icon-rose",
  },
]);

const products = ref([
  {
    name: "IUI Premium",
    description: "宫腔内人工授精",
    price: 1995,
    quantity: 1,
    icon: "Collection",
  },
  {
    name: "ICI Premium",
    description: "宫颈内人工授精",
    price: 1995,
    quantity: 1,
    icon: "Cpu",
  },
]);

const totalAmount = ref(3990);
const orderInfo = ref({});
const calculateTotal = () => {
  totalAmount.value = products.value.reduce((sum, product) => {
    return sum + product.price * product.quantity;
  }, 0);
};
watch(
  () => props.orderInfoData,
  (val) => {
    orderInfo.value = val;
  },
  { deep: true, immediate: true }
);
const handleView = (item: any) => {
  console.log("View item:", item);
};

const handleCancel = () => {
  emits("closeOrder");
};

const handleAddToCart = () => {
  emits("addOrder", orderInfo.value);
};

onMounted(() => {
  calculateTotal();
});
</script>

<style lang="scss" scoped>
// 变量定义
$primary-color: #2b5cab;
$primary-light: rgba($primary-color, 0.05);
$primary-lighter: rgba($primary-color, 0.1);
$background-color: #f9fafb;
$white: #ffffff;
$gray-50: #f9fafb;
$gray-100: #f3f4f6;
$gray-200: #e5e7eb;
$gray-600: #4b5563;
$gray-700: #374151;
$gray-800: #1f2937;
$amber-50: #fffbeb;
$amber-500: #f59e0b;
$blue-50: #eff6ff;
$blue-500: #3b82f6;
$rose-50: #fff1f2;
$rose-500: #f43f5e;
$emerald-500: #10b981;
$shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1),
  0 10px 10px -5px rgba(0, 0, 0, 0.04);
$border-radius: 0.75rem;
$border-radius-button: 0.5rem;

// 通用样式
.order-detail-container {
  // min-height: 100vh;
  background-color: $background-color;
  display: flex;
  align-items: center;
  justify-content: center;
  // padding: 1.5rem;
}

.order-detail-card {
  width: 1200px;
  background-color: $white;
  border-radius: $border-radius * 1.5;
  box-shadow: $shadow;
  overflow: hidden;
}

.card-header {
  background: linear-gradient(to right, $primary-light, transparent);
  padding: 2rem;
  border-bottom: 1px solid $gray-100;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.header-title {
  font-size: 1.5rem;
  font-weight: 600;
  color: $gray-800;
}

.close-button {
  border: none;
  border-radius: $border-radius-button;

  &:hover {
    background-color: $gray-100;
  }
}

.close-icon {
  color: $gray-600;
}

.card-content {
  padding: 1.5rem;
}

// 区块样式
.section {
  margin-bottom: 2rem;
}

.section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1.5rem;
}

.section-title {
  font-size: 1.25rem;
  font-weight: 500;
  color: $gray-800;
}

.badge {
  padding: 0.25rem 1rem;
  background-color: $primary-light;
  color: $primary-color;
  font-size: 0.875rem;
  font-weight: 500;
  border-radius: 9999px;
}

// 捐赠者信息样式
.info-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
}

.info-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem;
  border-radius: $border-radius;
  transition: background-color 0.2s;

  &:hover {
    background-color: $gray-50;
  }
}

.item-content {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.icon-wrapper {
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 0.5rem;
  display: flex;
  align-items: center;
  justify-content: center;

  &.icon-bg-primary {
    background-color: $primary-light;
  }

  &.icon-bg-amber {
    background-color: $amber-50;
  }

  &.icon-bg-blue {
    background-color: $blue-50;
  }

  &.icon-bg-rose {
    background-color: $rose-50;
  }
}

.icon-primary {
  color: $primary-color;
  font-size: 1.125rem;
}

.icon-amber {
  color: $amber-500;
  font-size: 1.125rem;
}

.icon-blue {
  color: $blue-500;
  font-size: 1.125rem;
}

.icon-rose {
  color: $rose-500;
  font-size: 1.125rem;
}

.item-title {
  color: $gray-700;
  font-weight: 500;
}

.item-actions {
  display: flex;
  align-items: center;
  gap: 1.5rem;
}

.price-tag {
  color: $emerald-500;
  font-weight: 500;
}

.view-button {
  color: $primary-color;
  padding: 0.5rem 1rem;
  border-radius: $border-radius-button;
}

.view-icon {
  margin-right: 0.25rem;
}

// 产品样式
.product-container {
  background-color: $gray-50;
  border-radius: $border-radius;
  padding: 1.5rem;
}

.product-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
}

.product-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem;
  background-color: $white;
  border-radius: 0.5rem;
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
}

.product-content {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.product-icon-wrapper {
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 0.5rem;
  background-color: $primary-lighter;
  display: flex;
  align-items: center;
  justify-content: center;
}

.product-icon {
  color: $primary-color;
  font-size: 1.125rem;
}

.product-details {
  display: flex;
  flex-direction: column;
}

.product-name {
  font-weight: 500;
  color: $gray-800;
  margin: 0;
}

.product-description {
  font-size: 0.875rem;
  color: $gray-600;
  margin: 0;
}

.product-controls {
  display: flex;
  align-items: center;
  gap: 2rem;
}

.product-price {
  color: $primary-color;
  font-weight: 500;
  font-size: 1.125rem;
}

.quantity-input {
  width: 110px;
  border-radius: $border-radius-button;
}

.help-tip {
  display: flex;
  align-items: center;
  margin-top: 1rem;
  font-size: 0.875rem;
  color: $gray-600;
}

.tip-icon {
  margin-right: 0.5rem;
  color: $primary-color;
}

.help-link {
  margin-left: 0.25rem;
  color: $primary-color;
}

// 底部样式
.order-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-top: 1px solid $gray-100;
  padding-top: 1.5rem;
  margin-top: 2rem;
}

.total-label {
  color: $gray-600;
  margin: 0;
}

.total-amount {
  font-size: 1.5rem;
  font-weight: 600;
  color: $gray-800;
  margin: 0.25rem 0 0 0;
}

.action-buttons {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.cancel-button,
.add-to-cart-button {
  height: 2.75rem;
  border-radius: $border-radius-button;
  white-space: nowrap;
}

.add-to-cart-button {
  background-color: $primary-color;
  border-color: $primary-color;

  &:hover,
  &:focus {
    background-color: darken($primary-color, 8%);
    border-color: darken($primary-color, 8%);
  }
}

.cart-icon {
  margin-right: 0.25rem;
}
</style>
